<template>
  <chat-message-item
    v-if="type === 'message'"
    :right="item.is_me"
    :avatar="item.from.avatar_url"
    :realname="item.is_me ? null : item.from.realname"
    :bigger="!isPhone"
  >
    <p>{{ item.content }}</p>
    <router-link
      v-if="isShowQuestion"
      :to="{
        name: 'question-show',
        params: {
          id: item.payload.question_id
        }
      }"
    >
      点击这里查看题目
    </router-link>
  </chat-message-item>
  <li v-else-if="type === 'time'" class="time">
    <p>{{ item }}</p>
  </li>
  <li v-else class="error">
    <p>{{ item.message || '未知错误' }}</p>
  </li>
</template>

<script>
import ChatMessageItem from '@/components/ChatMessageItem'
import { mapGetters } from 'vuex'

export default {
  name: 'MessagePrivateItem',
  components: {
    ChatMessageItem
  },
  props: {
    type: {
      type: String,
      required: true,
      validator(value) {
        return ['time', 'error', 'message'].indexOf(value) >= 0
      }
    },
    item: {
      required: true,
      validator(value) {
        return true
      }
    }
  },
  computed: {
    ...mapGetters({
      isPhone: 'isPhone'
    }),
    isShowQuestion() {
      if (this.item && this.item.message_type) {
        return ['Edit', 'Check', 'Comment'].indexOf(this.item.message_type) >= 0
      }
      return false
    }
  }
}
</script>

<style scoped>
.time,
.error {
  text-align: center;
  color: #999;
  padding: 6px 0;
  font-size: 0.8em;
}
</style>
